<template>
    <div class="employee-overview">
        <pageTitle :title="'員工概況'" />

        <!-- 第一行：統計卡片 -->
        <div class="stat-cards">
            <div class="stat-card" v-for="(card, index) in statCards" :key="index">
                <div class="card-content">
                    <div class="card-text">
                        <div class="card-title">{{ card.title }}</div>
                        <div class="card-value">
                            <vue-countup class="card-value" :start-val="0" :end-val="card.value" :duration="1"
                                separator="," />
                        </div>
                    </div>
                    <div class="card-icon">
                        <el-icon :size="40" :color="card.color">
                            <component :is="card.icon" />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二行：各部門員工柱狀圖 -->
        <div class="chart-container">
            <div class="chart-card">
                <div class="chart-header">
                    <h3>各部門員工分布</h3>
                </div>
                <div ref="departmentChart" class="chart"></div>
            </div>
        </div>

        <!-- 第三行：三個圖表 -->
        <div class="three-charts">
            <!-- 員工類型 -->
            <div class="chart-card">
                <div class="chart-header">
                    <h3>員工類型</h3>
                </div>
                <div ref="typeChart" class="chart"></div>
            </div>

            <!-- 員工學歷 -->
            <div class="chart-card">
                <div class="chart-header">
                    <h3>員工學歷</h3>
                </div>
                <div ref="educationChart" class="chart"></div>
            </div>

            <!-- 各年齡段員工人數 -->
            <div class="chart-card wide">
                <div class="chart-header">
                    <h3>各年齡段員工人數</h3>
                </div>
                <div ref="ageChart" class="chart"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import VueCountup from 'vue-countup-v3';
import pageTitle from "@/components/pageTitle/pageTitle.vue"

// 統計卡片數據
const statCards = ref([
    { title: '在職員工', value: '1234', icon: 'User', color: '#5B8FF9' },
    { title: '待入職員工', value: '56', icon: 'Clock', color: '#5BD8A6' },
    { title: '試用期員工', value: '78', icon: 'Loading', color: '#F6BD16' },
    { title: '正式員工', value: '1100', icon: 'Finished', color: '#6C8EBF' },
    { title: '待離職員工', value: '89', icon: 'Switch', color: '#A17ADE' },
    { title: '已離職員工', value: '345', icon: 'Close', color: '#E8684A' }
])

// 圖表引用
const departmentChart = ref(null)
const typeChart = ref(null)
const educationChart = ref(null)
const ageChart = ref(null)

onMounted(() => {
    // 初始化各部門員工圖表
    initDepartmentChart()
    // 初始化員工類型圖表
    initTypeChart()
    // 初始化員工學歷圖表
    initEducationChart()
    // 初始化年齡段圖表
    initAgeChart()
})

// 各部門員工圖表
const initDepartmentChart = () => {
    const chart = echarts.init(departmentChart.value)
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['研發部', '市場部', '銷售部', '人事部', '財務部', '客服部', '行政部'],
            axisLabel: {
                interval: 0,
                rotate: 0
            }
        },
        yAxis: {
            type: 'value',
            name: '人數'
        },
        series: [{
            name: '員工人數',
            type: 'bar',
            data: [320, 180, 220, 150, 80, 120, 90],
            itemStyle: {
                color: '#4092fc'
            },
            barWidth: '60%',
            label: {
                show: true,
                position: 'top'
            }
        }]
    }
    chart.setOption(option)

    // 響應式調整
    window.addEventListener('resize', function () {
        chart.resize()
    })
}

// 員工類型圖表
const initTypeChart = () => {
    const chart = echarts.init(typeChart.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '員工類型',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '正式員工' },
                    { value: 735, name: '試用期員工' },
                    { value: 580, name: '實習生' },
                    { value: 484, name: '兼職員工' }
                ]
            }
        ]
    }
    chart.setOption(option)

    window.addEventListener('resize', function () {
        chart.resize()
    })
}

// 員工學歷圖表
const initEducationChart = () => {
    const chart = echarts.init(educationChart.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '員工學歷',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '本科' },
                    { value: 735, name: '大專' },
                    { value: 580, name: '碩士' },
                    { value: 484, name: '博士' },
                    { value: 300, name: '高中及以下' }
                ]
            }
        ]
    }
    chart.setOption(option)

    window.addEventListener('resize', function () {
        chart.resize()
    })
}

// 年齡段圖表
const initAgeChart = () => {
    const chart = echarts.init(ageChart.value)
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['20歲以下', '20-25歲', '26-30歲', '31-35歲', '36-40歲', '41-45歲', '46-50歲', '50歲以上']
        },
        yAxis: {
            type: 'value',
            name: '人數'
        },
        series: [{
            name: '員工人數',
            type: 'bar',
            data: [50, 320, 480, 280, 180, 120, 80, 50],
            itemStyle: {
                color: '#4092fc'
            },
            barWidth: '60%',
            label: {
                show: true,
                position: 'top'
            }
        }]
    }
    chart.setOption(option)

    window.addEventListener('resize', function () {
        chart.resize()
    })
}
</script>

<style scoped>
.employee-overview {
    padding: 20px;
    background-color: #f5f7fa;
}

/* 統計卡片樣式 */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin: 20px 0;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-card {
    background-color: white;
    border-radius: 8px;
    padding: 20px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.card-text {
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
}

.card-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(64, 146, 252, 0.1);
}

/* 圖表容器樣式 */
.chart-container {
    margin-bottom: 20px;
}

.chart-card {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 400px;
}

.chart-header {
    margin-bottom: 16px;
}

.chart-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.chart {
    width: 100%;
    height: calc(100% - 30px);
}

/* 三個圖表佈局 */
.three-charts {
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
    gap: 16px;
}
</style>